<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <form name="temp_form" ng-controller="cont">
        <div>
            学制：
            <!-- ...as...for...in... -->
            <!-- as前面部分对应元素的value值，用于选中时获取 -->
            <!-- as后面部分对应元素的text值，用于直接显示 -->
            <select ng-model="grade" ng-options="v.id as v.name for v in a_data" ng-change="a_change(grade)">
                <option value="">---请选择--</option>
            </select>
            <span>{{a_show}}</span>

            <div>
                班级：
                <!-- ...as...group by...for...in... -->
                <select ng-model="b" ng-options="v.id as v.name group by v.grade for v in b_data" ng-change="b_change(b)">
                    <option value="">---请选择--</option>
                </select>
                <span>{{b_show}}</span>
            </div>
        </div>
    </form>

    <script>
        var app = angular.module('app',[]);
        app.controller('cont',['$scope',function ($scope) {
            $scope.a_data = [
                { 'id':"1001", name:"小学" },
                { 'id':"1002", name:"初中" },
                { 'id':"1003", name:"高中" }
            ];

            $scope.b_data = [
                { 'id':"1001", name:"（1）班", grade:"一年级" },
                { 'id':"1002", name:"（2）班", grade:"一年级" },
                { 'id':"2001", name:"（2）班", grade:"二年级" },
                { 'id':"2002", name:"（1）班", grade:"二年级" },
                { 'id':"3001", name:"（1）班", grade:"三年级" },
                { 'id':"3002", name:"（2）班", grade:"三年级" }
            ];

            $scope.a = "";
            $scope.b = "";
            $scope.a_change = function (grade) {
                $scope.a_show = "您选择的是：" + grade;
            }
            $scope.b_change = function (b) {
                $scope.b_show = "您选择的是：" + b;
            }
        }]);

    </script>
</body>
</html>